<template>
	<div class="h-full w-1/2 pt-2 pl-2">
		<div class="bg-white h-full w-full">
			<div class="bg-white h-full w-full flex flex-col">
				<div class="pl-4 pt-4">工资支出折线图</div>
				<t-divider></t-divider>
				<div class="pl-4 pr-4 pb-4 flex-grow">
					<div class="h-full flex flex-col">
						<!-- 下拉菜单 -->
						<t-dropdown class="ml-auto" :options="options" @click="clickHandler" :minColumnWidth="88">
							<t-button theme="default" variant="outline">2022年</t-button>
						</t-dropdown>
						<div class="flex-grow">
							<div class="overflow-hidden" id="SalaryData" style="width: 40vw; height: 100%"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { toYear } from '@/unit/myDate'
	import '@/unit/walden'

	export default {
		name: 'SalaryData',
		data() {
			return {
				xAxisArr: [],
				seriesArr: [],
				year: {
					content: '',
					value: ''
				}
			}
		},
		computed: {
			options() {
				let arr = []
				for (let i = 0; i < 5; i++) {
					arr[i] = {}
					arr[i].content = (toYear() - i) + '年'
					arr[i].value = toYear() - i
				}
				return arr
			}
		},
		methods: {
			// 选择框
			clickHandler(data) {
				this.year.content = data.content
				this.year.value = data.value
				this.getSalaryData(this.year.value)
			},
			// 封装发送请求并处理数据渲染图表
			getSalaryData(year) {
				this.$store.dispatch('dashboard/getSalaryData', year).then(res => {
					for(let i = 0 ; i < res.data.length ; i++){
						this.xAxisArr[i] = res.data[i].s_date
						this.seriesArr[i] = res.data[i].all_salary
					}
					this.drawLine();
				})
			},
			// 封装图表插件
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let SalaryDataChart = this.$echarts.init(document.getElementById('SalaryData'), 'walden')
				// 绘制图表
				SalaryDataChart.setOption({
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.xAxisArr
					},
					tooltip: {
						trigger: 'axis'
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: this.seriesArr,
						type: 'line',
						areaStyle: {}
					}]
				});
				// 自动调整容器大小
				window.onresize = function() {
					SalaryDataChart.resize();
				};
			}
		},
		mounted() {
			this.year.content = this.options[0].content
			this.year.value = this.options[0].value
			// 组件创建后发送请求
			this.getSalaryData(this.year.value)
		},
	}
</script>

<style>
</style>
